<#include "/layout/default.ftl">

<#-- Add specific to courses JS files. -->
<#if !courses.content?has_content>
    <#assign head_js_courses>
        <@head_js><script src="${baseUrl}/bootstrap/js/course/index/index.js"></script></@head_js>
    </#assign>
    <#macro head_js>${head_js_courses}</#macro>
</#if>

<#macro mainContainer>
<div class="container-fluid">
    <div class="content">
        <div class="page-header">
            <h3><#if courses.i18n?has_content>${courses.i18n.header}</#if></h3>
        </div>
        <div class="row-fluid">
            <div class="span12">

                <#if !courses.content?has_content>
                    <@emptymodal/>
                    <h2><#if courses.i18n?has_content>${courses.i18n.modal_title}</#if></h2>
                <#else >
                    <#list courses.content as current>
                        <div class="row-fluid">
                            <div class="span8 offset2 course-block">
                                <h3>
                                    <a href="${baseUrl}/material/?course_id=${current.id}">${current.title}</a>
                                    <small>(${current.startDate?date}&nbsp;/&nbsp;${current.finishDate?date})</small>
                                </h3>
                                <hr/>

                                <div class="row-fluid">
                                    <div class="span3">
                                        <#if current.logoURL?has_content>
                                            <img src="${current.logoURL}" alt="course logo" style="width:260px;height:180px;"/>
                                        <#else>
                                            <img src="http://placehold.it/260x180" alt=""/>
                                        </#if>
                                    </div>
                                    <div class="span9">${current.shortDescription}</div>
                                </div>

                                <#-- Join course actions-->
                                <#if loggedOnUser?has_content>
                                    <hr/>
                                    <#if (current.isEnrolled)>
                                        <div class="pull-left">
                                            <a class="btn" href="#unenrollModal" data-toggle="modal" onclick="$('input[name=course_id]').val(${current.id})">
                                                <i class="icon-remove"></i>
                                                <#if courses.i18n?has_content>
                                                    ${courses.i18n.unenroll_button_label}
                                                <#else>
                                                    Залишити курс
                                                </#if>
                                            </a>
                                        </div>
                                    </#if>
                                    <div class="pull-right">
                                        <#if (current.isEnrolled)>
                                            <a class="btn btn-primary" href="${baseUrl}/material/?course_id=${current.id}">
                                                <i class="icon-info-sign icon-white"></i>
                                                <#if courses.i18n?has_content>
                                                    ${courses.i18n.show_materials_button_label}
                                                <#else>
                                                    Перегляд матеріалу
                                                </#if>
                                            </a>
                                        <#elseif (current.isPending)>
                                            <p>
                                                <#if courses.i18n?has_content>
                                                    ${courses.i18n.pending_label}
                                                <#else>
                                                    Ваша заявка чекає на схвалення
                                                </#if>
                                            </p>
                                        <#else>
                                            <a class="btn btn-success" href="${baseUrl}/course/enroll/?course_id=${current.id}">
                                                <i class="icon-ok"></i>
                                                <#if courses.i18n?has_content>
                                                ${courses.i18n.enroll_button_label}
                                                <#else>
                                                    Приєднатися до курсу
                                                </#if>
                                            </a>
                                        </#if>
                                    </div>
                                </#if>
                            </div>
                        </div>
                    </#list>
                </#if>
            </div>
        </div>
    </div>
    <div class="push"></div>
</div>
</#macro>

<#macro head_title>
<title>
    <#if courses.i18n?has_content>
        ${courses.i18n.header}
    <#else>
        Список доступних курсів.
    </#if>
</title>
</#macro>

<#macro emptymodal>
<#--Modal -->
<div class="modal" id="emptyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel"><#if courses.i18n?has_content>${courses.i18n.modal_title}</#if></h3>
    </div>
    <div class="modal-body">
        <p><#if courses.i18n?has_content>${courses.i18n.modal_body}</#if></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            <#if courses.i18n?has_content>${courses.i18n.close}</#if>
        </button>
    </div>
</div>
</#macro>

<@render/>
